<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div id="first">
            <p>{{message}}</p>
            <!-- 在根组件中使用全局注册的组件 -->
            <kai-fa-miao></kai-fa-miao>
            <!-- 在根组件中使用全局注册的组件 -->
            <xi-an></xi-an>
            <!-- 在根组件中使用在根组件中本地注册的组件 -->
            <kai-rui></kai-rui>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return { message: '娇娇说张仙姑的符不灵了' }
                },
                // 本地注册
                components: {
                    KaiRui: {
                        template: `<div style="border: 1px solid red ; margin: 15px auto ;">凯瑞</div>`
                    }
                }
            });

            // 全局注册
            app.component( 'XiAn' , {
                template: `<div style="border: 1px solid green ; margin: 15px auto ;">
                                <!-- 在自定义组件中使用另一个采用全局注册的组件 -->
                                <kai-fa-miao></kai-fa-miao>
                                <!-- 试图使用在根组件中本地注册的组件 -->
                                <kai-rui></kai-rui>
                           </div>`
            });

            // 全局注册
            app.component( 'KaiFaMiao' , {
                template: `<div class="border" style="margin : 15px auto ; text-align: center;">
                            云创动力·开发喵
                           </div>`
            });

            app.mount( '#first' );
        </script>

        <div id="second">
            <kai-fa-miao></kai-fa-miao>
        </div>

        <script>
            const second = Vue.createApp({});
            second.mount( '#second' );
        </script>

    </body>
</html>